<div id="topic_list">
    <% if (!config.lazyload) { %>
    <%- partial('../topic/abstract', {collection:topics, as:'topic'}) %>
    <% } %>
</div>
<% if (!config.lazyload) { %>
<% var base_url = base + (base.indexOf('?') < 0 ? '?' : '&')
+ 'tab=' + (typeof tab !== 'undefined' ? tab : '') + '&page='; %>
<div class='pagination' current_page='<%= current_page %>'>
    <ul>
        <% if (current_page == 1) { %>
        <li class='disabled'><a>«</a></li>
        <% } else { %>
        <li><a href="<%= base_url %>1">«</a></li>
        <% } %>

        <%
        var page_start = current_page - 2 > 0 ? current_page - 2 : 1;
        var page_end = page_start + 4 >= pages ? pages : page_start + 4;
        %>

        <% if (page_start > 1) { %>
        <li><a>...</a></li>
        <% } %>

        <% for(var i = page_start; i <= page_end; i++) { %>
        <% if (i === current_page) { %>
        <li class='disabled'><a><%= i %></a></li>
        <% } else { %>
        <li><a href='<%= base_url + i %>'><%= i %></a></li>
        <% } %>
        <% } %>

        <% if (page_end < pages ) { %>
        <li><a>...</a></li>
        <% } %>

        <% if (current_page == pages) { %>
        <li class='disabled'><a>»</a></li>
        <% } else { %>
        <li><a href='<%= base_url + pages %>'>»</a></li>
        <% } %>
    </ul>
</div>
<script>
    $(document).ready(function () {
        var $nav = $('.pagination');
        var current_page = $nav.attr('current_page');
        if (current_page) {
            $nav.find('li').each(function () {
                var $li = $(this);
                var $a = $li.find('a');
                if ($a.html() == current_page) {
                    $li.addClass('active');
                    $a.removeAttr('href');
                }
            });
        }
    });
</script>
<% } %>